<template>
  <div class="m-box">
    <div class="days">
      <img class="img" v-lazy="publicUrl('/images/bg1.jpg')" alt="" />
      <div class="d-top">
        <div class="d-title font">每日特价</div>
        <div class="d-select thumb">
          精选<img v-lazy="publicUrl('/images/right-icon-jin.png')" alt="" />
        </div>
      </div>
      <div class="d-nav">
        <div
          v-for="(item, index) in Nav"
          class="n-tag font thumb"
          @click="() => obtain(index)"
          :class="index == Index ? 'active' : ''"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="box">
        <div class="d-shop d-shop-width thumb" v-for="item in Shop">
          <!-- <div class="frame"><img v-lazy="publicUrl('/images/frame.png')" alt=""></div> -->
          <div class="s-img"><img v-lazy="item.img" alt="" /></div>
          <div class="s-tag overOne">{{ item.tag }}</div>
          <div class="s-price">
            ￥
            <p>{{ item.price }}</p>
          </div>
        </div>

        <div
          class="d-shop-width"
          v-for="item in surplusDiv(Shop.length, 3)"
        ></div>
      </div>
    </div>
    <div class="manufactor">
      <div class="m-top">
        <div class="t-left font">优质厂家</div>
        <router-link :to="`/home/supplier?toList=1`" class="t-right thumb"
          >更多优质厂家<img
            v-lazy="publicUrl('/images/right-blue.png')"
            alt=""
          />
        </router-link>
      </div>
      <div class="m-nav">
        <div
          class="m-m thumb"
          @click="() => obtain1(index)"
          v-for="(item, index) in Manufactor"
          :class="index == Index1 ? 'color' : ''"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="m-subject">
        <div class="s-box s-box-width" v-for="items in List">
          <div class="b-top">
            <div class="b-img"><img v-lazy="items.img" alt="" /></div>
            <div class="b-detail">
              <div class="d-header">
                <div class="h-title overOne" :title="items.title">
                  {{ items.title }}
                </div>
                <RouterLink to="/supplier/index" class="h-page thumb"
                  >主页<img
                    v-lazy="publicUrl('/images/right-icon-red.png')"
                    alt=""
                /></RouterLink>
              </div>
              <div class="d-middle" :title="items.detail">
                {{ items.detail }}
              </div>
              <div class="d-foot">
                定制价格区间：
                <p>{{ items.price }}</p>
              </div>
            </div>
          </div>
          <div class="b-foot">
            <router-link
              to="/supplier/mtm/index?activeName=0"
              class="b-nav thumb overOne"
              title="MTM定制"
              >MTM定制</router-link
            >
            <router-link
              to="/supplier/mtm/fabric/index?activeName=2"
              class="b-nav thumb overOne"
              title="面料供应"
              >面料供应</router-link
            >
            <router-link
              to="/supplier/mtm/spot/index?activeName=1"
              class="b-nav thumb overOne"
              title="现货供应"
              >现货供应</router-link
            >
            <router-link
              to="/supplier/mtm/spot/ingredients?activeName=1"
              class="b-nav thumb overOne"
              title="辅料供应"
              >辅料供应</router-link
            >
          </div>
        </div>
        <div
          class="s-box-width"
          v-for="index of surplusDiv(List.length, 2)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name>
import { ref } from "vue";
import { publicUrl, surplusDiv } from "@/utils/util";

// interface Data{name:string}
// const Data =ref<Array<any>>(
//     [{name:'MTM定制'},{name:'面料供应'},{name:'现货供应'},{name:'辅料供应'}]
// )

interface List {
  img: string;
  title: string;
  detail: string;
  price: string;
}
const List = ref<Array<any>>([
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  {
    img: publicUrl("/images/logo.png"),
    title:
      "云裁定制服云裁定制服装有限公司云裁定制服装有限公司云裁定制服装有限公司装有限公司",
    detail:
      "主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款主营：牛仔裤定制、西装定制、休闲定制、大量固定款",
    price: "￥99-￥199",
  },
  // ,{img:publicUrl('/images/logo.png'),title:'云裁定制服装有限公司',detail:"主营：牛仔裤定制、西装定制、休闲定制、大量固定款",price:"￥99-￥199"},
  // {img:publicUrl('/images/logo.png'),title:'云裁定制服装有限公司',detail:"主营：牛仔裤定制、西装定制、休闲定制、大量固定款",price:"￥99-￥199"},
  // {img:publicUrl('/images/logo.png'),title:'云裁定制服装有限公司',detail:"主营：牛仔裤定制、西装定制、休闲定制、大量固定款",price:"￥99-￥199"},
  // {img:publicUrl('/images/logo.png'),title:'云裁定制服装有限公司',detail:"主营：牛仔裤定制、西装定制、休闲定制、大量固定款",price:"￥99-￥199"},
  // {img:publicUrl('/images/logo.png'),title:'云裁定制服装有限公司',detail:"主营：牛仔裤定制、西装定制、休闲定制、大量固定款",price:"￥99-￥199"},
  // {img:publicUrl('/images/logo.png'),title:'云裁定制服装有限公司',detail:"主营：牛仔裤定制、西装定制、休闲定制、大量固定款",price:"￥99-￥199"},
  // {img:publicUrl('/images/logo.png'),title:'云裁定制服装有限公司',detail:"主营：牛仔裤定制、西装定制、休闲定制、大量固定款",price:"￥99-￥199"}
]);

interface Manufactor {
  name: string;
}
const Manufactor = ref<Array<any>>([
  { name: "MTM定制生产产家" },
  { name: "面料供应商" },
]);
const Index1 = ref<number>(0);
const obtain1 = (index: number) => {
  Index1.value = index;
};
interface Shop {
  img: string;
  tag: string;
  price: string;
}
const Shop = ref<Array<any>>([
  {
    img: publicUrl("/images/Special1.png"),
    tag: "夏季MTM定制化男衬衫",
    price: "59.90",
  },
  {
    img: publicUrl("/images/Special2.png"),
    tag: "夏季MTM定制化男衬衫",
    price: "59.90",
  },
  {
    img: publicUrl("/images/Special3.png"),
    tag: "夏季MTM定制化男衬衫",
    price: "59.90",
  },
  {
    img: publicUrl("/images/Special4.png"),
    tag: "夏季MTM定制化男衬衫",
    price: "59.90",
  },
  {
    img: publicUrl("/images/Special5.png"),
    tag: "夏季MTM定制化男衬衫",
    price: "59.90",
  },
  {
    img: publicUrl("/images/Special6.png"),
    tag: "夏季MTM定制化男衬衫",
    price: "59.90",
  },
  {
    img: publicUrl("/images/Special1.png"),
    tag: "夏季MTM定制化男衬衫",
    price: "59.90",
  },
  {
    img: publicUrl("/images/Special2.png"),
    tag: "夏季MTM定制化男衬衫",
    price: "59.90",
  },
  // {img:publicUrl('/images/Special3.png'),tag:"夏季MTM定制化男衬衫",price:"59.90"}
]);

interface Nav {
  title: string;
}
const Nav = ref<Array<any>>([
  { title: "MTM定制特卖" },
  { title: "现货特卖" },
  { title: "面料特卖" },
]);
const Index = ref<number>(0);
const obtain = (index: number) => {
  Index.value = index;
};

const jump = (path: string) => {};
</script>

<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}
</style>
